import { Link, Route, Switch, NavLink, Redirect } from 'react-router-dom'
import { BrowserRouter } from 'react-router-dom'

function AAA() {
  return (<h2>aaa</h2>)
}
function BBB() {
  return (<h2>bbb</h2>)
}

function About(router) {
  return (<div>
    <Link to="/about/aaa">a</Link>
    <Link to="/about/bbb">b</Link>

    <Route path="/about/aaa" component={AAA}></Route>
    <Route path="/about/bbb" component={BBB}></Route>
  </div>)
}

function Home() {
  return <div>home</div>
}


function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {/* 内联样式 */}
        <div>
          <NavLink activeStyle={{color: 'blue'}} to="/home">Home</NavLink>
          <NavLink activeStyle={{color: 'red'}} to="/about">about</NavLink>
        </div>
        {/* 一个switch为一组，只会展示第一个被匹配的组件 */}
        <Switch>
          <Route exact component={Home} path="/home"></Route>
          <Route exact component={About} path="/about"></Route>
        </Switch>
        
      </BrowserRouter>
    </div>
  )
}

export default App
